<template>
  <div class="onlineCourseFinishDetail">
    <div class="flex items_center mb_40" :class="{ mb_20: isView }">
      <div class="blue_hint mr_8" v-if="isView === 1"></div>
      <div class="online_course_detail_title">线上课完成明细</div>
      <a-tooltip placement="topLeft" v-if="isView !== 1">
        <template #title>
          <span>统计对象为培训项目中的所有线上课和项目成员</span>
        </template>
        <InfoCircleOutlined />
      </a-tooltip>
    </div>
    <a-table :dataSource="dataSource" :columns="columns" :pagination="false">
      <template #course_name="{ text }">
        <a-popover
          placement="topLeft"
          :overlayStyle="{ width: '368px' }"
          v-if="isView !== 1"
        >
          <template #content>
            {{ text }}
          </template>
          <div class="course_name">
            {{ text }}
          </div>
        </a-popover>
        <div class="course_name" :class="{ active: isView }" v-else>
          {{ text }}
        </div>
      </template></a-table
    >
    <Pagination
      :currentPage="currentPage"
      :total="Number(total)"
      :pageSize="pageSize"
      @page-change="PageChange"
    />
  </div>
</template>

<script>
import Pagination from "./Pagination.vue";
import { InfoCircleOutlined } from "@ant-design/icons-vue";
export default {
  props: {
    isView: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      pageSize: 3,
      total: 0,
      currentPage: 1,
      dataSource: [
        {
          key: "1",
          course_name:
            "这是一个很长的课程名称这是一个很长的课程名称这是一个很长的课程名称这是一个很长的课程名称",
          plan_time: "2023-05-24 16:05 至 2023-06-24 17:05",
          no_study: 10,
          ongoing: 5,
          has_been_completed: 10,
        },
        {
          key: "1",
          course_name:
            "这是一个很长的课程名称这是一个很长的课程名称这是一个很长的课程名称这是一个很长的课程名称",
          plan_time: "2023-05-24",
          no_study: 10,
          ongoing: 5,
          has_been_completed: 10,
        },
      ],

      columns: [
        {
          width: "20%",
          title: "课程名称",
          dataIndex: "course_name",
          key: "course_name",
          slots: { customRender: "course_name" },
        },
        {
          width: this.isView === 1 ? "24%" : "14%",
          title: "计划时间",
          dataIndex: "plan_time",
          key: "plan_time",
        },
        {
          align: "right",
          title: "未学习人数",
          dataIndex: "no_study",
          key: "no_study",
        },
        {
          align: "right",
          title: "进行中人数",
          dataIndex: "ongoing",
          key: "ongoing",
        },
        {
          align: "right",
          title: "已完成人数",
          dataIndex: "has_been_completed",
          key: "has_been_completed",
        },
      ],
    };
  },
  components: {
    InfoCircleOutlined,
    Pagination,
  },
  methods: {
    // 点击页码
    PageChange(page) {
      // this.getUserList(this.pageSize, (page - 1) * this.pageSize);
    },
  },
};
</script>
<style lang="less" scoped>
div {
  font-family: "PingFang SC";
  font-style: normal;
}
.flex {
  display: flex;
}
.items_center {
  align-items: center;
}

.mb_40 {
  margin-bottom: 40px;
}
.mb_20 {
  margin-bottom: 20px;
}
.mr_8 {
  margin-right: 8px;
}
.onlineCourseFinishDetail {
  // display: inline-block;
  padding: 18px 24px 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #e5e6eb;
}
.online_course_detail_title {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  margin-right: 5px;
}
.course_name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 205px;
  height: 44px;
  &.active {
    overflow: unset;
    text-overflow: unset;
    height: unset;
    -webkit-box-orient: unset;
    -webkit-line-clamp: unset;
  }
}
.blue_hint {
  width: 8px;
  height: 22px;
  background: #0093ff;
}
</style>
